<{include file="Common/head"}>
<{include file="Common/menu"}>
<script type="text/javascript" src="_index_/yy/jquery-3.5.1.min.js"></script>
<link href="_index_/yy/index.css" rel="stylesheet">
<link href="_index_/yy/laydate.css" rel="stylesheet">
<script src="_index_/yy/laydate.js"></script>
<script type="text/javascript" src="_index_/laydate/laydate.js"></script>
<script type="text/javascript" src="_index_/yy/fixedTable.js"></script>


<style type="text/css">
    *{font-size: 15px!important;}
    .Hui-article-box {
        display: flex;
        flex-flow: column;
    }
    .table th, .table td{line-height: 30px!important;}
    .outDiv {
        text-align:center;
    }
    .fakeContainer {
        max-height: 100%;
        overflow: auto;
        width: 3000px;
    }
    .fakeContainer::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
    }
    .fakeContainer::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .fakeContainer::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
    tbody .pointer{cursor: pointer}

    .table th, .table td {
        word-break: normal;
    }
    .sDefault th, .sDefault td {
        border: none;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

</style>

<section class="Hui-article-box">
    <div class="select_date">
        <span id="selectdata" class="">选择日期:</span>
        <div class="laydate-box">
            <input type="text" id="laydateInputs" placeholder="年-月-日">
        </div>
    </div>
    <div class="outDiv" id="div_container">
        <div id="my_div"  class='fakeContainer first_div'>
            <!--今日项目预约时间占用表-->
            <table class="table table-border table-bordered table-hover" id="demoTable">
                <thead>
                    <tr class="success" style="background: #eeeeee;" id="my_tr">
                        <th>时间</th>
                        <?php
                        foreach($projects as $k => $v){
                        ?>
                        <th><?php echo $v; ?></th>
                        <?php
                        }
                        ?>
                    </tr>
                </thead>
        
                <!--
            </table>
            <table class="table table-border table-bordered table-hover time_table">
        
        
                <?php
                dd($data);
        
        ?>-->
                <tbody >
                <?php
                    foreach($data as $a => $b){
                ?>
                        <tr>
                            <td id="td"><?php echo substr($a,0,5); ?></td>
                            <?php
                                foreach($b as $bk => $bv){
                                $sizeof_bv=sizeof($bv['data']);
                            ?>
                            <{if condition="$sizeof_bv > 0"}>
                            <td class="pointer" style='background-color: <{$bv['colore']}> '>
                                <{else /}>
                            <td class="pointer" onclick="add('<{$a}>','<{$bk}>')" style='background-color: <{$bv['colore']}>'>
                                <{/if}>
        
                                <?php
                                    if(sizeof($bv)>0){
        
                                $html='';
                                $bv_count=sizeof($bv['data']);
                                $bv_Data=$bv['data'];
                                for($i=0;$i<$bv_count;$i+=2){
                                if($i+2<$bv_count){
                                $html.="<div onclick='modify({$bv_Data[$i+1]})'>$bv_Data[$i],</div>";
                                }else{
                                $html.="<div onclick='modify({$bv_Data[$i+1]})'>$bv_Data[$i]</div>";
                                }
                                }
                                       echo $html;
                                    }
                                ?>
                            </td>
                            <?php
                                }
                            ?>
                        </tr>
                <?php
                    }
                ?>
                </tbody>
        
            </table>
        </div>
    </div>
</section>


<{include file="Common/footer"}>
<script type="text/javascript">

    //传递两参数，时间、项目，打开弹窗页面，设置好选择的时间项目即可
    function add(time,position){
//        console.log(time)
//        console.log(position)
        date = $("#laydateInputs").val();

        if(document.body.clientWidth>760){
            layer.open({
                title:"添加",
                type: 2,
                area: ['900px', '600px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/index/Index/tcadd?time='+time+'&position='+position+'&date='+date
            });
        }else{
            window.location.href = '/index/Index/tcadd?time='+time+'&position='+position+'&date='+date
        }
    }

    //查看与修改
    function modify(id){
        if(id>0){
            if(document.body.clientWidth>760){
                layer.open({
                    title:"查看",
                    type: 2,
                    area: ['900px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "/index/Index/modify?id="+id+"&stype=1"
                });
            }else{
                window.location.href = "/index/Index/modify?id="+id+"&stype=1"
            }
        }
    }


    window.onload = function(){
        var tableCont = document.querySelector('#my_div');
        function scrollHandle (e){

            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll',scrollHandle);
    };


    $(function(){
        set_time = getQueryVariable('time')?getQueryVariable('time'):getNowFormatDate();
        setTimeout("$('#laydateInputs').val(set_time);",500);

        //常规用法
        laydate.render({
            elem: '#laydateInputs' ,
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                window.location.href="/index/Set/timeemploy?time="+value;
                //$("#laydateInput").val();

            }
        });


//        $("tbody tr").each(function(){
//            $(this).children("td").each(function(i){
//                $(this).mouseover(function(){
//                    $(this).parent().css("backgroundColor","");
//                    $("tbody tr").each(function(){
//                        $(this).children("td").each(function(j){
//                            if(i==j){
//                                $(this).css("backgroundColor","#f5f5f5");
//                            }
//                        });
//                    });
//                });
//                $(this).mouseout(function(){
//                    $(this).parent().css("backgroundColor","");
//                    $("tbody tr").each(function(){
//                        $(this).children("td").each(function(k){
//                            if(i==k){
//                                $(this).css("backgroundColor","");
//                            }
//                        });
//                    });
//                });
//            });
//
//        });

        $('.table td:first-child').each(function(){
            var td_height = $(this).outerHeight();
            var tr_height = $(this).parent().outerHeight();
            if (td_height > tr_height) {
                $(this).parent().height(td_height);
            } else if (td_height < tr_height) {
                $(this).outerHeight(tr_height);
            }
        });
    });

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    $(document).ready(function() {
        var table;
        table = new FixedTable("dataTable", 1);
    })
</script>